<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getRoleInfo, addRoleInfo, delRoleInfo } from "@/api/departmentApi";
import { ElMessage } from "element-plus";

//角色列表数据
const tableData = ref([]);
//
onMounted(() => {
  getRoInfo(queryData.value);
});
//请求初始条件
let queryData = ref({
  name: "",
  isEnabled: "",
  pageNum: 1,
  pageSize: 10
});

//发送请求数据
async function getRoInfo(queryData) {
  let res = await getRoleInfo(queryData);
  tableData.value = res.data.data;
  total.value = res.data.total;
}
//总条数
let total = ref(0);
//查询角色信息
function selectRoleInfo() {
  getRoInfo(queryData.value);
  reset();
}
//重置请求条件
function reset() {
  queryData.value = {
    name: "",
    isEnabled: "",
    pageNum: 1,
    pageSize: 10
  };
  addRole.value = {
    name: "",
    isEnabled: "0",
    permissions: [
      { id: "1", name: "平台管理", isEnabled: "1" },
      { id: "2", name: "系统设置", isEnabled: "1" },
      { id: "3", name: "用户管理", isEnabled: "1" },
      { id: "4", name: "业务员管理", isEnabled: "1" },
      { id: "5", name: "产品管理", isEnabled: "1" },
      { id: "6", name: "订单管理", isEnabled: "1" },
      { id: "7", name: "营销管理", isEnabled: "1" },
      { id: "8", name: "评价管理", isEnabled: "1" },
      { id: "9", name: "财务管理", isEnabled: "1" }
    ]
  };
}

//分页操作
function chaPage() {
  getRoInfo(queryData.value);
}
//发送请求数据

//编辑
function handleEdit(row) {
  addRole.value = row;
  changeDialogVisible.value = true;
}
//删除
const del = ref({ id: -1 });
function handleDel(row) {
  del.value.id = row.id;
  centerDialogVisible.value = true;
}
async function addRoInfo() {
  dialogOverflowVisible.value = false;

  let res = await addRoleInfo(addRole.value);

  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
  reset();
  getRoInfo(queryData.value);
}

async function isDel() {
  centerDialogVisible.value = false;
  let res = await delRoleInfo(del.value.id);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
}

async function isChange() {
  changeDialogVisible.value = false;
}
//添加部门完成以后重置属性 关闭Dialog 执行
function close() {
  reset();
}

// 删除对话框
const centerDialogVisible = ref(false);
// 添加对话框
const dialogOverflowVisible = ref(false);
// 修改对话框
const changeDialogVisible = ref(false);

function cancel() {
  dialogOverflowVisible.value = false;
  changeDialogVisible.value = false;
}

const options = [
  {
    value: "",
    label: "所有"
  },
  {
    value: "0",
    label: "开启"
  },
  {
    value: "1",
    label: "禁用"
  }
];

let addRole = ref({
  name: "",
  isEnabled: "0",
  permissions: [
    { id: "1", name: "平台管理", isEnabled: "1" },
    { id: "2", name: "系统设置", isEnabled: "1" },
    { id: "3", name: "用户管理", isEnabled: "1" },
    { id: "4", name: "业务员管理", isEnabled: "1" },
    { id: "5", name: "产品管理", isEnabled: "1" },
    { id: "6", name: "订单管理", isEnabled: "1" },
    { id: "7", name: "营销管理", isEnabled: "1" },
    { id: "8", name: "评价管理", isEnabled: "1" },
    { id: "9", name: "财务管理", isEnabled: "1" }
  ]
});
</script>
<template>
  <div>
    <div>
      <div style="height: 50px; margin-top: 20px; margin-left: 5px">
        <span>角色名称:</span>
        <el-input
          v-model="queryData.name"
          style="width: 240px; margin-right: 8px"
          placeholder="请输入角色名"
        />
        <span>角色状态:</span>
        <el-select
          v-model="queryData.isEnabled"
          placeholder="所有"
          size="large"
          style="width: 240px; margin-right: 8px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" @click="selectRoleInfo">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
    </div>
    <div style="height: 50px; margin-top: 20px; float: right">
      <el-button type="primary" @click="dialogOverflowVisible = true"
        >添加</el-button
      >
    </div>

    <el-table :data="tableData" border style="width: 100%" max-height="430">
      <el-table-column
        prop="id"
        label="编号"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="name"
        label="角色名"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="createdAt"
        label="创建时间"
        header-align="center"
      />
      <el-table-column
        prop="isEnabled"
        label="状态（开启/禁用）"
        header-align="center"
      >
        <template #default="{ row }">
          <el-switch
            v-model="row.isEnabled"
            inactive-value="1"
            active-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="small" @click="handleDel(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="queryData.pageSize"
      v-model:current-page="queryData.pageNum"
      size="small"
      background
      layout="total ,sizes,prev, pager,next, jumper, ->,"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      @change="chaPage"
    />
    <!--删除角色信息 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="删除部门信息"
      width="500"
      align-center
    >
      <span>确定要删除该信息吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="isDel"> 确定删除 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加角色信息 -->
    <el-dialog
      v-model="dialogOverflowVisible"
      title="添加"
      width="500"
      draggable
      overflow
      @close="close"
    >
      <span>角色名称:</span>
      <el-input
        v-model="addRole.name"
        style="width: 240px"
        placeholder="角色名称"
      />
      <br />
      <br />
      <span>是否开启:</span>
      <el-radio-group v-model="addRole.isEnabled">
        <el-radio value="0" size="large">开启</el-radio>
        <el-radio value="1" size="large">禁用</el-radio>
      </el-radio-group>
      <br />
      <br />
      <span>权限:</span>
      <div
        v-for="item in addRole.permissions"
        :key="item.name"
        style="margin-left: 50px"
      >
        <el-checkbox
          v-model="item.isEnabled"
          true-value="0"
          false-value="1"
          style="margin-right: 5px"
        />
        <span>{{ item.name }}</span>

        <br />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="addRoInfo"> 确认添加 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑角色信息 -->
    <el-dialog
      v-model="changeDialogVisible"
      title="修改"
      width="500"
      draggable
      overflow
      disabled
    >
      <span>角色名称:</span>
      <el-input
        v-model="addRole.name"
        style="width: 240px"
        placeholder="角色名称"
      />
      <br />
      <br />
      <span>是否开启:</span>
      <el-radio-group v-model="addRole.isEnabled">
        <el-radio value="0" size="large">开启</el-radio>
        <el-radio value="1" size="large">禁用</el-radio>
      </el-radio-group>
      <br />
      <br />
      <span>权限:</span>
      <div
        v-for="item in addRole.permissions"
        :key="item.name"
        style="margin-left: 50px"
      >
        <el-checkbox
          v-model="item.isEnabled"
          true-value="0"
          false-value="1"
          style="margin-right: 5px"
        />
        <span>{{ item.name }}</span>

        <br />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="isChange"> 确定修改 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
